<template>
  <div class="info-section comments-section">
    <h4 class="section-title">
      评论 ({{ commentPagination.total || 0 }})
    </h4>
    
    <!-- 评论列表 -->
    <div class="comments-list" v-loading="commentLoading">
      <div v-if="commentTree.length > 0" class="comments-container">
        <div 
          v-for="comment in commentTree" 
          :key="comment.id"
          class="comment-item"
        >
          <!-- 评论头部 -->
          <div class="comment-header">
            <el-avatar :size="32" class="comment-avatar">
              {{ comment.user_name?.charAt(0)?.toUpperCase() || 'U' }}
            </el-avatar>
            <div class="comment-info">
              <div class="comment-author">{{ comment.user_name || '未知用户' }}</div>
              <div class="comment-time">{{ formatDateTime(comment.created_at) }}</div>
              <el-tag v-if="comment.parent_comment_id" size="small" type="info" class="reply-badge">
                回复
              </el-tag>
            </div>
            <div class="comment-actions-menu" v-if="canEditComment(comment)">
              <el-dropdown @command="(cmd) => handleCommentMenu(cmd, comment)">
                <el-button type="text" size="small" circle>
                  <el-icon><MoreFilled /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      command="edit"
                      :disabled="editingCommentId === comment.id"
                    >
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="reply"
                      :disabled="replyingToCommentId === comment.id"
                    >
                      回复
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="delete"
                      divided
                    >
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>

          <!-- 评论内容 -->
          <div class="comment-body">
            <!-- 编辑模式 -->
            <div v-if="editingCommentId === comment.id" class="comment-edit-form">
              <el-input
                v-model="editingContent"
                type="textarea"
                :rows="3"
                placeholder="编辑评论..."
                maxlength="2000"
                show-word-limit
              />
              <div class="comment-form-actions">
                <el-button size="small" @click="cancelEditComment">取消</el-button>
                <el-button 
                  type="primary" 
                  size="small"
                  :loading="commentLoading"
                  @click="saveEditComment(comment.id)"
                >
                  保存
                </el-button>
              </div>
            </div>

            <!-- 回复模式 -->
            <div v-else-if="replyingToCommentId === comment.id" class="comment-reply-form">
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="3"
                placeholder="回复评论..."
                maxlength="2000"
                show-word-limit
              />
              <div class="comment-form-actions">
                <el-button size="small" @click="cancelReplyComment">取消</el-button>
                <el-button 
                  type="primary" 
                  size="small"
                  :loading="commentLoading"
                  @click="submitReplyComment(comment.id)"
                >
                  回复
                </el-button>
              </div>
            </div>

            <!-- 正常显示模式 -->
            <div v-else class="comment-content">
              <div v-if="comment.is_deleted" class="deleted-comment">
                <el-text type="info" size="small" :italic="true">该评论已被撤回</el-text>
              </div>
              <div v-else>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-footer">
                  <el-button 
                    type="text" 
                    size="small"
                    @click="startReplyComment(comment.id)"
                  >
                    回复
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 显示该评论的所有回复 -->
          <div v-if="getReplies(comment.id).length > 0" class="comment-replies">
            <div
              v-for="reply in getReplies(comment.id)"
              :key="reply.id"
              class="comment-item is-reply"
            >
              <div class="comment-header">
                <el-avatar :size="28" class="comment-avatar">
                  {{ reply.user_name?.charAt(0)?.toUpperCase() || 'U' }}
                </el-avatar>
                <div class="comment-info">
                  <div class="comment-author">{{ reply.user_name || '未知用户' }}</div>
                  <div class="comment-time">{{ formatDateTime(reply.created_at) }}</div>
                  <el-tag size="small" type="info" class="reply-badge">
                    回复
                  </el-tag>
                </div>
                <div class="comment-actions-menu" v-if="canEditComment(reply)">
                  <el-dropdown @command="(cmd) => handleCommentMenu(cmd, reply)">
                    <el-button type="text" size="small" circle>
                      <el-icon><MoreFilled /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item 
                          command="edit"
                          :disabled="editingCommentId === reply.id"
                        >
                          编辑
                        </el-dropdown-item>
                        <el-dropdown-item 
                          command="delete"
                          divided
                        >
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              
              <div class="comment-body">
                <!-- 编辑模式 -->
                <div v-if="editingCommentId === reply.id" class="comment-edit-form">
                  <el-input
                    v-model="editingContent"
                    type="textarea"
                    :rows="2"
                    placeholder="编辑评论..."
                    maxlength="2000"
                    show-word-limit
                  />
                  <div class="comment-form-actions">
                    <el-button size="small" @click="cancelEditComment">取消</el-button>
                    <el-button 
                      type="primary" 
                      size="small"
                      :loading="commentLoading"
                      @click="saveEditComment(reply.id)"
                    >
                      保存
                    </el-button>
                  </div>
                </div>
                
                <!-- 正常显示模式 -->
                <div v-else class="comment-content">
                  <div v-if="reply.is_deleted" class="deleted-comment">
                    <el-text type="info" size="small" :italic="true">该评论已被撤回</el-text>
                  </div>
                  <div v-else>
                    <div class="reply-to">
                      <el-text type="info" size="small">回复 {{ getParentCommentName(reply.parent_comment_id) }}</el-text>
                    </div>
                    <div class="comment-text">{{ reply.content }}</div>
                    <div class="comment-footer">
                      <el-button 
                        type="text" 
                        size="small"
                        @click="startReplyComment(reply.parent_comment_id || comment.id)"
                      >
                        回复
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="!commentLoading" class="no-comments">
        <el-empty description="暂无评论" :image-size="80" />
      </div>
      
      <!-- 分页组件 -->
      <div v-if="commentPagination.total > commentPagination.pageSize" class="comments-pagination">
        <el-pagination
          v-model:current-page="commentPagination.page"
          v-model:page-size="commentPagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="commentPagination.total"
          @size-change="handleCommentPageSizeChange"
          @current-change="handleCommentPageChange"
        />
      </div>
    </div>

    <!-- 添加评论 -->
    <div class="add-comment-form">
      <el-input
        v-model="newCommentContent"
        type="textarea"
        :rows="3"
        placeholder="添加评论..."
        maxlength="2000"
        show-word-limit
        :disabled="commentLoading"
      />
      <div class="comment-form-actions">
        <el-button 
          type="primary" 
          size="small"
          :loading="commentLoading"
          @click="submitNewComment"
          :disabled="!newCommentContent.trim()"
        >
          发表评论
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { 
  getTaskComments, 
  addTaskComment, 
  updateTaskComment
} from '@/api/tasks'

interface TaskComment {
  id: string
  user_id: string
  user_name: string
  content: string
  parent_comment_id?: string | null
  is_deleted: boolean
  created_at: string
  updated_at?: string | null
}

interface CommentPagination {
  page: number
  pageSize: number
  total: number
}

const props = defineProps<{
  taskId: string
}>()

const emit = defineEmits<{
  (e: 'comment-count-change', count: number): void
}>()

const userStore = useUserStore()

// 响应式数据
const comments = ref<TaskComment[]>([])
const commentLoading = ref(false)
const newCommentContent = ref('')
const editingCommentId = ref<string | null>(null)
const editingContent = ref('')
const replyingToCommentId = ref<string | null>(null)
const replyContent = ref('')
const lastLoadedTaskId = ref<string | null>(null) // 记录上次加载的 taskId
const loadingPromise = ref<Promise<void> | null>(null) // 正在进行的加载请求

const commentPagination = ref<CommentPagination>({
  page: 1,
  pageSize: 20,
  total: 0
})

// 计算属性
const currentUserId = computed(() => userStore.userInfo?.id || '')

// 构建评论树形结构
const commentTree = computed(() => {
  // 分离父评论和回复
  const parentComments: TaskComment[] = []
  const replyMap = new Map<string, TaskComment[]>()
  
  // 先找到所有父评论（没有 parent_comment_id 的）
  comments.value.forEach(comment => {
    if (!comment.parent_comment_id) {
      parentComments.push(comment)
    } else {
      // 收集回复
      const parentId = comment.parent_comment_id
      if (!replyMap.has(parentId)) {
        replyMap.set(parentId, [])
      }
      replyMap.get(parentId)!.push(comment)
    }
  })
  
  // 对父评论按创建时间降序排序
  parentComments.sort((a, b) => {
    const timeA = new Date(a.created_at).getTime()
    const timeB = new Date(b.created_at).getTime()
    return timeB - timeA
  })
  
  // 对每个父评论的回复按创建时间升序排序（早的在前面）
  replyMap.forEach((replies) => {
    replies.sort((a, b) => {
      const timeA = new Date(a.created_at).getTime()
      const timeB = new Date(b.created_at).getTime()
      return timeA - timeB
    })
  })
  
  // 构建树形结构
  return parentComments.map(comment => ({
    ...comment,
    replies: replyMap.get(comment.id) || []
  }))
})

// 检查是否可以编辑评论
const canEditComment = (comment: TaskComment): boolean => {
  if (comment.is_deleted) return false
  return currentUserId.value === comment.user_id
}

// 获取父评论名称
const getParentCommentName = (parentId: string | null | undefined): string => {
  if (!parentId) return '未知用户'
  // 在所有评论中查找（包括父评论和回复）
  const allComments = commentTree.value.flatMap(c => [c, ...c.replies])
  const parentComment = allComments.find(c => c.id === parentId)
  return parentComment?.user_name || '未知用户'
}

// 获取某个评论的所有回复
const getReplies = (commentId: string): TaskComment[] => {
  const comment = commentTree.value.find(c => c.id === commentId)
  return comment?.replies || []
}

// 格式化日期时间
const formatDateTime = (dateStr: string | null | undefined): string => {
  if (!dateStr) return ''
  
  try {
    const date = new Date(dateStr)
    if (isNaN(date.getTime())) return dateStr
    
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffMins = Math.floor(diffMs / 60000)
    const diffHours = Math.floor(diffMs / 3600000)
    const diffDays = Math.floor(diffMs / 86400000)
    
    if (diffMins < 1) {
      return '刚刚'
    } else if (diffMins < 60) {
      return `${diffMins}分钟前`
    } else if (diffHours < 24) {
      return `${diffHours}小时前`
    } else if (diffDays < 7) {
      return `${diffDays}天前`
    } else {
      return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date)
    }
  } catch (error) {
    console.error('日期格式化失败:', error)
    return dateStr || ''
  }
}

// 加载评论列表
const loadComments = async () => {
  if (!props.taskId) return
  
  // 防止重复调用：如果正在加载中，或者相同的 taskId 和页码已经在加载，则跳过
  const requestKey = `${props.taskId}-${commentPagination.value.page}-${commentPagination.value.pageSize}`
  
  // 如果已经有正在进行的相同请求，直接返回该 Promise
  if (loadingPromise.value) {
    await loadingPromise.value
    return
  }
  
  // 如果相同的 taskId 和分页参数，且已加载过，则跳过（除非是用户主动触发的操作）
  if (lastLoadedTaskId.value === requestKey && !commentLoading.value) {
    return
  }
  
  // 创建加载 Promise
  loadingPromise.value = (async () => {
    try {
      commentLoading.value = true
      const response = await getTaskComments(
        props.taskId, 
        commentPagination.value.page, 
        commentPagination.value.pageSize
      )
      
      if (response.success && response.data) {
        // 处理分页响应数据
        if (response.data.items && Array.isArray(response.data.items)) {
          comments.value = response.data.items
          commentPagination.value.total = response.data.total || 0
        } else if (Array.isArray(response.data)) {
          comments.value = response.data
          commentPagination.value.total = response.data.length
        } else {
          comments.value = []
          commentPagination.value.total = 0
        }
        
        // 记录本次加载的参数
        lastLoadedTaskId.value = requestKey
        
        // 触发评论数量变化事件（使用后端返回的总数，已排除软删除的评论）
        emit('comment-count-change', commentPagination.value.total)
      } else {
        ElMessage.error(response.message || '获取评论失败')
        comments.value = []
        commentPagination.value.total = 0
        lastLoadedTaskId.value = requestKey
      }
    } catch (error: any) {
      console.error('加载评论失败:', error)
      ElMessage.error(error.message || '加载评论失败，请稍后重试')
      comments.value = []
      commentPagination.value.total = 0
    } finally {
      commentLoading.value = false
      loadingPromise.value = null
    }
  })()
  
  await loadingPromise.value
}

// 提交新评论
const submitNewComment = async () => {
  if (!newCommentContent.value.trim() || !props.taskId) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  try {
    commentLoading.value = true
    const response = await addTaskComment(props.taskId, newCommentContent.value.trim())
    
    if (response.success) {
      ElMessage.success('评论发布成功')
      newCommentContent.value = ''
      commentPagination.value.page = 1 // 重置到第一页
      lastLoadedTaskId.value = null // 重置记录，允许重新加载
      await loadComments()
    } else {
      ElMessage.error(response.message || '评论发布失败')
    }
  } catch (error: any) {
    console.error('提交评论失败:', error)
    ElMessage.error(error.message || '评论发布失败，请稍后重试')
  } finally {
    commentLoading.value = false
  }
}

// 开始回复评论
const startReplyComment = (commentId: string) => {
  replyingToCommentId.value = commentId
  replyContent.value = ''
  editingCommentId.value = null
  editingContent.value = ''
}

// 提交回复
const submitReplyComment = async (parentCommentId: string) => {
  if (!replyContent.value.trim() || !props.taskId) {
    ElMessage.warning('请输入回复内容')
    return
  }
  
  try {
    commentLoading.value = true
    const response = await addTaskComment(
      props.taskId, 
      replyContent.value.trim(),
      parentCommentId
    )
    
    if (response.success) {
      ElMessage.success('回复成功')
      cancelReplyComment()
      commentPagination.value.page = 1 // 重置到第一页
      lastLoadedTaskId.value = null // 重置记录，允许重新加载
      await loadComments()
    } else {
      ElMessage.error(response.message || '回复失败')
    }
  } catch (error: any) {
    console.error('提交回复失败:', error)
    ElMessage.error(error.message || '回复失败，请稍后重试')
  } finally {
    commentLoading.value = false
  }
}

// 取消回复
const cancelReplyComment = () => {
  replyingToCommentId.value = null
  replyContent.value = ''
}

// 开始编辑评论
const startEditComment = (comment: TaskComment) => {
  editingCommentId.value = comment.id
  editingContent.value = comment.content
  replyingToCommentId.value = null
  replyContent.value = ''
}

// 保存编辑
const saveEditComment = async (commentId: string) => {
  if (!editingContent.value.trim() || !props.taskId) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  try {
    commentLoading.value = true
    const response = await updateTaskComment(
      props.taskId, 
      commentId,
      { content: editingContent.value.trim() }
    )
    
    if (response.success) {
      ElMessage.success('评论编辑成功')
      cancelEditComment()
      lastLoadedTaskId.value = null // 重置记录，允许重新加载
      await loadComments()
    } else {
      ElMessage.error(response.message || '评论编辑失败')
    }
  } catch (error: any) {
    console.error('编辑评论失败:', error)
    ElMessage.error(error.message || '评论编辑失败，请稍后重试')
  } finally {
    commentLoading.value = false
  }
}

// 取消编辑
const cancelEditComment = () => {
  editingCommentId.value = null
  editingContent.value = ''
}

// 处理评论菜单操作
const handleCommentMenu = async (command: string, comment: TaskComment) => {
  switch (command) {
    case 'edit':
      startEditComment(comment)
      break
    case 'reply':
      startReplyComment(comment.id)
      break
    case 'delete':
      await handleDeleteComment(comment)
      break
  }
}

// 删除评论（软删除，设置is_deleted为true）
const handleDeleteComment = async (comment: TaskComment) => {
  try {
    await ElMessageBox.confirm(
      '确定要撤回这条评论吗？',
      '确认撤回',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    commentLoading.value = true
    const response = await updateTaskComment(
      props.taskId,
      comment.id,
      { is_deleted: true }
    )
    
    if (response.success) {
      ElMessage.success('评论已撤回')
      lastLoadedTaskId.value = null // 重置记录，允许重新加载
      await loadComments()
    } else {
      ElMessage.error(response.message || '评论撤回失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('撤回评论失败:', error)
      ElMessage.error(error.message || '评论撤回失败，请稍后重试')
    }
  } finally {
    commentLoading.value = false
  }
}

// 分页处理
const handleCommentPageChange = (page: number) => {
  commentPagination.value.page = page
  lastLoadedTaskId.value = null // 重置记录，允许重新加载
  loadComments()
}

const handleCommentPageSizeChange = (size: number) => {
  commentPagination.value.pageSize = size
  commentPagination.value.page = 1
  lastLoadedTaskId.value = null // 重置记录，允许重新加载
  loadComments()
}

// 是否已执行过首次加载
const hasInitialLoad = ref(false)

// 监听taskId变化（处理首次加载和后续变化）
watch(() => props.taskId, async (newId, oldId) => {
  if (!newId) return
  
  // 首次加载：taskId 从 undefined/null 变为有值
  if (!oldId && newId) {
    if (!hasInitialLoad.value) {
      hasInitialLoad.value = true
      commentPagination.value.page = 1
      lastLoadedTaskId.value = null
      await nextTick()
      await loadComments()
    }
  } 
  // taskId 改变（重新加载）
  else if (newId && newId !== oldId) {
    commentPagination.value.page = 1
    lastLoadedTaskId.value = null // 重置记录，允许重新加载
    await nextTick()
    await loadComments()
  }
}, { flush: 'post', immediate: true })

// 组件挂载时的备用加载（如果 watch 没有触发）
onMounted(() => {
  if (props.taskId && !hasInitialLoad.value) {
    hasInitialLoad.value = true
    commentPagination.value.page = 1
    loadComments()
  }
})
</script>

<style scoped lang="scss">
.comments-section {
  margin-top: 28px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #409eff, #1a73e8);
    border-radius: 2px;
  }
}

.comments-list {
  margin-bottom: 20px;
  
  .comments-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

.comment-item {
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #c6e2ff;
  }
  
  &.is-reply {
    margin-left: 0;
    margin-top: 0;
    border-left: 3px solid #e4e7ed;
    padding-left: 12px;
    background-color: #fafbfc;
    border-radius: 6px;
  }

  .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;

    .comment-avatar {
      flex-shrink: 0;
    }

    .comment-info {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;

      .comment-author {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
      }

      .comment-time {
        font-size: 12px;
        color: #909399;
      }
      
      .reply-badge {
        font-size: 12px;
        height: 22px;
        line-height: 20px;
        padding: 0 8px;
        border-radius: 4px;
        font-weight: 500;
        background-color: #ecf5ff;
        color: #409eff;
        border: none;
      }
    }
    
    .comment-actions-menu {
      margin-left: auto;
      opacity: 0;
      transition: opacity 0.2s ease;
      
      .el-button {
        color: #909399;
        &:hover {
          color: #409eff;
          background-color: #ecf5ff;
        }
      }
    }
    
    &:hover .comment-actions-menu {
      opacity: 1;
    }
  }

  .comment-body {
    margin-left: 44px;
  }
  
  // 回复区域样式
  .comment-replies {
    margin-top: 16px;
    padding-left: 44px;
    border-left: 2px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    .comment-item.is-reply {
      margin-left: 0;
      margin-top: 0;
    }
  }

  .comment-content {
    margin-top: 8px;
    
    .deleted-comment {
      padding: 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      text-align: center;
    }
    
    .reply-to {
      background-color: #f5f7fa;
      padding: 6px 10px;
      border-radius: 4px;
      margin-bottom: 8px;
      font-size: 13px;
      border-left: 3px solid #409eff;
      
      .el-text {
        color: #606266;
      }
    }

    .comment-text {
      font-size: 14px;
      line-height: 1.6;
      color: #4d4d4d;
      white-space: pre-wrap;
      word-break: break-word;
      background-color: #fafafa;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #f0f0f0;
      min-height: 40px;
    }
    
    .comment-footer {
      margin-top: 12px;
      .el-button {
        padding: 4px 12px;
        font-size: 12px;
        border-radius: 4px;
        color: #606266;
        &:hover {
          color: #409eff;
          background-color: #ecf5ff;
        }
      }
    }
  }
  
  .comment-edit-form,
  .comment-reply-form {
    margin-top: 12px;
    
    :deep(.el-textarea__inner) {
      border-radius: 6px;
      border-color: #dcdfe6;
      
      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      }
    }
    
    .comment-form-actions {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      
      .el-button {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 6px;
      }
    }
  }
}

.no-comments {
  text-align: center;
  padding: 40px 20px;
  color: #a0a0a0;
  
  :deep(.el-empty) {
    padding: 0;
  }
}

.comments-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  
  :deep(.el-pagination) {
    padding: 12px 0;
  }
}

.add-comment-form {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  
  :deep(.el-textarea__inner) {
    border-radius: 6px;
    border-color: #dcdfe6;
    min-height: 80px;
    
    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
  
  .comment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    
    .el-button {
      padding: 8px 20px;
      border-radius: 6px;
      font-weight: 500;
    }
  }
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .comment-item {
    padding: 12px;
    
    &.is-reply {
      margin-left: 0;
      padding-left: 12px;
    }

    .comment-body {
      margin-left: 0;
    }
    
    .comment-content {
      .comment-text {
        padding: 10px 12px;
      }
      .comment-footer {
        margin-top: 10px;
      }
    }
    
    .comment-edit-form,
    .comment-reply-form {
      margin-left: 0;
      margin-top: 10px;
    }
  }
  
  .comments-list {
    .comments-container {
      gap: 10px;
    }
  }
  
  .add-comment-form {
    padding: 16px;
    .comment-form-actions {
      margin-top: 12px;
    }
  }
}
</style>
